// 条件节点
// 定时器
<template>
  <div class="t_drawer_body">
    <t_tab_container notHasTabs>
      <div class="tab_content">
        <fieldLabel>标题设置</fieldLabel>
        <Input v-model="data.title" />
        <fieldLabel>条件设置</fieldLabel>
        <Table
          :columns="columns"
          :data-source="data.conditions"
          :rowKey="returnRowKey"
          size="middle"
          :pagination="false"
        >
          <template slot="field" slot-scope="text, record, index">
            <Select
              :defaultValue="text"
              style="width: 100%"
              @change="(val) => handleChange('field', val, index)"
            >
              <SelectOption
                v-for="item in fieldOptions"
                :key="item.value"
                :value="item.value"
                >{{ item.name }}</SelectOption
              >
            </Select>
            </Select>
          </template>
          <template slot="symbol" slot-scope="text, record, index">
            <Select
              :defaultValue="text"
              style="width: 100%"
              @change="(val) => handleChange('symbol', val, index)"
            >
              <SelectOption
                v-for="item in symbolOptions"
                :key="item.value"
                :value="item.value"
                >{{ item.name }}</SelectOption
              >
            </Select>
          </template>
          <template slot="filedValue" slot-scope="text, record, index">
            <Input
              :defaultValue="text"
              @change="(e) => handleChange('filedValue', e.target.value, index)"
            />
          </template>
          <template slot="logic" slot-scope="text, record, index">
            <Select
              :defaultValue="text"
              style="width: 100%"
              @change="(val) => handleChange('logic', val, index)"
            >
             <SelectOption
                v-for="item in logicOptions"
                :key="item.value"
                :value="item.value"
                >{{ item.name }}</SelectOption
              >
            </Select>
            </Select>
          </template>
          <template slot="action" slot-scope="text, record">
            <Button type="link" @click="deleteCondition(record.id)"
              >删除</Button
            >
          </template>
        </Table>
        <Button
          icon="plus"
          type="primary"
          style="margin-top: 10px"
          @click="addCondition"
          >添加条件</Button
        >
      </div>
    </t_tab_container>
    <div class="t_buttom_group">
      <Button style="margin-right: 10px" @click="() => $emit('close')"
        >取消</Button
      >
      <Button type="primary" @click="confirm">确定</Button>
    </div>
  </div>
</template>

<script>
import t_tab_container from "./components/t_tab_container.vue";
import fieldLabel from "./components/fieldLabel.vue";
import AddButton from "../button/AddButton.vue";
import EventBus from "../eventBus";
import message from "ant-design-vue/lib/message";
import { verify_c } from "../../utils/verify";

import Button from "ant-design-vue/lib/button/button";
import Input from "ant-design-vue/lib/input";
import Select from "ant-design-vue/lib/select";
import Table from "ant-design-vue/lib/table";

const { Option } = Select;
const SelectOption = Option;
function guid() {
  function S4() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }
  return (
    S4() +
    S4() +
    "-" +
    S4() +
    "-" +
    S4() +
    "-" +
    S4() +
    "-" +
    S4() +
    S4() +
    S4()
  );
}
const columns = [
  {
    title: "字段名称",
    dataIndex: "field",
    width: "22.5%",
    scopedSlots: { customRender: "field" },
  },
  {
    title: "比较",
    dataIndex: "symbol",
    width: "22.5%",
    scopedSlots: { customRender: "symbol" },
  },
  {
    title: "数值",
    dataIndex: "filedValue",
    width: "22.5%",
    scopedSlots: { customRender: "filedValue" },
  },
  {
    title: "逻辑",
    dataIndex: "logic",
    width: "22.5%",
    scopedSlots: { customRender: "logic" },
  },
  {
    title: "",
    dataIndex: "action",
    width: "10%",
    scopedSlots: { customRender: "action" },
  },
];

const symbolOptions = [
  {
    name: "大于等于",
    value: ">=",
  },
  {
    name: "大于",
    value: ">",
  },
  {
    name: "小于等于",
    value: "<=",
  },
  {
    name: "小于",
    value: "<",
  },
  {
    name: "等于",
    value: "==",
  },
  {
    name: "不等于",
    value: "!=",
  },
];

const logicOptions = [
  {
    name: "并且",
    value: "&&",
  },
  {
    name: "或者",
    value: "||",
  },
];

export default {
  components: {
    t_tab_container,
    fieldLabel,
    AddButton,
    Button,
    Input,
    Button,
    Select,
    SelectOption,
    Table,
  },
  props: {
    nodeData: Object,
    customFields: Array,
  },

  computed: {},
  data() {
    return {
      columns,
      symbolOptions,
      logicOptions,
      fieldOptions: this.customFields.map((e) => ({
        name: e.fieldName,
        value: e.fieldId,
      })),
      data: JSON.parse(JSON.stringify(this.nodeData.dataProps)),
    };
  },

  methods: {
    getEmptyTableItem() {
      let id = guid();
      return {
        fieldName: "",
        field: "",
        symbolName: "",
        symbol: "",
        logicName: "",
        logic: "",
        filedValue: "",
        id,
      };
    },
    returnRowKey(record) {
      return record.id;
    },

    //   添加条件
    addCondition() {
      this.data.conditions.push(this.getEmptyTableItem());
    },
    deleteCondition(id) {
      let copyData = [...this.data];
      // copyData.splice(index, 1);
      this.data = copyData.filter((item) => id !== item.id);
    },
    handleChange(key, value, index) {
      let actionObj = this.data.conditions[index];
      actionObj[key] = value;

      if (key === "filedValue") {
        return;
      }
      let name = "";
      for (let v of this[key + "Options"]) {
        if (v.value === value) {
          name = v.name;
        }
      }
      actionObj[key + "Name"] = name;
    },
    confirm() {
      let verifyInfo = verify_c(this.data);
      if (verifyInfo.pass) {
        EventBus.$emit("UPDATE_NODE", {
          nodeId: this.nodeData.nodeId,
          path: this.nodeData.path,
          dataProps: this.data,
        });
        this.$emit("close");
      } else {
        message.warning(verifyInfo.message.join("、"));
      }
    },
  },
};
</script>

<style scoped>
.t_drawer_body {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 55px);
}

.t_buttom_group {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 24px;
}
.tab_content {
  padding: 0 24px;
}

#c_table td {
  background-color: pink;
}
</style>